<layout name="../../../resource/master"/>
<script src="__ROOT__/node_modules/hdjs/js/jquery.min.js"></script>
<ul class="breadcrumb no-border no-radius b-b b-light pull-in">
    <li><a href="index.html"><i class="fa fa-home"></i> Home</a></li>
    <li><a href="#">商品管理</a></li>
    <li><a href="#">商品添加</a></li>
</ul>
<div class="m-b-md">
    <h3 class="m-b-none">商品添加</h3>
</div>
<section class="panel panel-default">
    <header class="panel-heading font-bold">商品添加</header>
    <div class="panel-body">
        <form class="form-horizontal" method="post" action="">
            <div class="form-group">
                <label class="col-sm-2 control-label">所属分类</label>
                <div class="col-sm-5">

                    <select name="cid" class="form-control m-b">
                        <option value="">请选择</option>

                        <volist name="cateData" id="vo">
                        <option value="{$vo['cid']}"tid="{$vo['tid']}">{$vo['_cname']}</option>
                        </volist>
                    </select>
                </div>
            </div>
            <script>
              $(function(){
              //判断有没有走进来【如果没有走进来证明没引进js】
              //1.判断所属分类里面的cid的值如果发生改变时 就会触发change事件
              $('select[name = cid]').change(function(){

                  var tid = $(':selected').attr('tid');
                  //顶级分类不能添加商品，顶级分类tid=0，这样在类型属性中查不到数据
                  if(tid==0){
                     alert('顶级分类不能添加商品');
                      $(this).val(0);
                      return false;
                  }
                  //将tid写入到隐藏域中
                  $('input[name=tid]').val(tid);
              //2.$.post异步写出来  //post方式发送异步；请求地址、请求数据、成功回调、返回的数据类型
                  $.post("{:u('ajaxGetSpec')}",{tid:tid},function(res){

                    //定义两个空的字符串字段用来接收下面的属性和规则的值
                      var spec = "";
                      var attr ="";
                     //foreach循环出来所有数据
                      $.each(res,function(k,v){
                          //判断当他的属性值等于==0的时候代表的是规格 否则就是属性
                          if(v.value==0){
                          //说明是规格
                              spec+= '<tr><td>'+ v.name+'</td>';
                              spec+='<td><select name="spec['+v.taid+'][spec][]" id=""><option value="">请选择</option>';
                          //将所有是规格的值遍历出来
                          $.each(v.typeattr,function(kk,vv){
                              //<option value="">请选择</option>
                              spec+='<option value="'+vv+'">'+vv+'</option>';
                              })
                          //增加附加价格
                              spec+='</select></td><td>附加价格</td><td>';
                              spec+='<input type="text" name="spec['+ v.taid+'][added][]" value=""></td><td>';
                              spec+='<button type="button" class="btn btn-success btn-xs addSpec">追加</button></td></tr>';

                          }else{
                         //说明是属性
                              attr +='<tr><td>'+ v.name+'</td>';
                              attr +='<td><select name="attr['+ v.taid+']" id=""><option value="">请选择</option>';
                         // 将所有属性值遍历出来
                              $.each(v.typeattr,function(kk,vv){
                                  //<option value="">请选择</option>
                              attr +='<option value="'+vv+'">'+vv+'</option>';
                              })
                              attr+='</select></td></tr>';
                          }
                    })
                      //不明白 html(attr)指的是res
                 $('#attr').html(attr);
                 $('#spec').html(spec);
                },'json')
            })
        })





            </script>

            <div class="line line-dashed line-lg pull-in"></div>
            <div class="form-group">
                <label class="col-sm-2 control-label">所属品牌</label>
                <div class="col-sm-5">
                    <select name="bid" class="form-control m-b">
                        <option value="22">请选择</option>
                        <volist name="brandData" id="vo">
                            <option value="{$vo['bid']}">{$vo['bname']}</option>
                        </volist>
                    </select>
                </div>
            </div>
            <div class="line line-dashed line-lg pull-in"></div>

            <div class="form-group">
                <label class="col-sm-2 control-label">商品名称</label>
                <div class="col-sm-5">
                    <input type="text" name="gname" class="form-control">
                </div>
            </div>
            <div class="line line-dashed line-lg pull-in"></div>
            <div class="form-group">
                <label class="col-sm-2 control-label">商品货号</label>
                <div class="col-sm-5">
                    <input type="text" name="product" class="form-control">
                    <span class="help-block m-b-none">请输入商品货号。。。</span>
                </div>
            </div>
            <div class="line line-dashed line-lg pull-in"></div>
            <div class="form-group">
                <label class="col-sm-2 control-label" for="input-id-1">单位</label>
                <div class="col-sm-5">
                    <input type="text" name="company" class="form-control" id="input-id-1" value="件">
                </div>
            </div>
            <div class="line line-dashed line-lg pull-in"></div>
            <div class="form-group">
                <label class="col-sm-2 control-label">市场价</label>
                <div class="col-sm-5">
                    <input type="number" name="market" class="form-control">
                </div>
            </div>
            <div class="line line-dashed line-lg pull-in"></div>
            <div class="form-group">
                <label class="col-sm-2 control-label">商城价</label>
                <div class="col-sm-5">
                    <input type="number"  class="form-control" name="price" placeholder="">
                </div>
            </div>
            <div class="line line-dashed line-lg pull-in"></div>
            <div class="form-group">
                <label class="col-sm-2 control-label">点击次数</label>
                <div class="col-sm-5">
                    <input type="text"  class="form-control" name="click" placeholder="">
                </div>
            </div>
            <div class="line line-dashed line-lg pull-in"></div>
            <div class="form-group">
                <label class="col-sm-2 control-label">库存</label>
                <div class="col-sm-5">
                    <input type="text"  class="form-control" name="stock" placeholder="">
                </div>
            </div>
            <div class="line line-dashed line-lg pull-in"></div>
            <div class="form-group">
                <label class="col-sm-2 control-label">商品属性</label>
                <div class="col-sm-5">
                    <table class="table table-hover" id="attr">

                        <!--<tr>-->
                            <!--<td>材料质地</td>-->
                            <!--<td>-->
                                <!--<select name="" id="">-->
                                    <!--<option value="">请选择</option>-->
                                    <!--<option value="">请选择</option>-->
                                    <!--<option value="">请选择</option>-->
                                <!--</select>-->
                            <!--</td>-->
                        <!--</tr>-->
                    </table>
                </div>
            </div>
            <script>
                $(function(){

                    $('#spec').delegate('.addSpec','click',function(){
                        //将当前的tr复制一份
                        var tr = $(this).parents('tr').clone();
                        //将添加按钮换成删除按钮
                        //tr.find('button').remove();
                        var del ='<button type="button" class="btn btn-danger btn-xs delSpec">删除</button>';
                        tr.find('td').last().html(del);
                        //把复制的这份tr往后面追加
                        $(this).parents('tr').after(tr);
                    })
                    //点击删除,删除一项
                    $('#spec').delegate('.delSpec','click',function(){
                        $(this).parents('tr').remove();
                    })

                })



            </script>
            <div class="line line-dashed line-lg pull-in"></div>
            <div class="form-group">
                <label class="col-sm-2 control-label">商品规格</label>
                <div class="col-sm-6">
                    <table class="table table-hover" id="spec">
                        <!--<tr>-->
                            <!--<td>颜色</td>-->
                            <!--<td>-->
                                <!--<select name="" id="">-->
                                    <!--<option value="">请选择</option>-->
                                    <!--<option value="">请选择</option>-->
                                    <!--<option value="">请选择</option>-->
                                <!--</select>-->
                            <!--</td>-->
                            <!--<td>-->
                                <!--附加价格-->
                            <!--</td>-->
                            <!--<td>-->
                                <!--<input type="text" name="" value="">-->
                            <!--</td>-->
                            <!--<td>-->
                                <!--<button class="btn btn-success btn-xs">追加</button>-->
                            <!--</td>-->
                        <!--</tr>-->
                    </table>
                </div>
            </div>
            <div class="line line-dashed line-lg pull-in"></div>
            <!--引入uploadify相关js、css-->
            <script src="__ROOT__/node_modules/hdjs/js/jquery.min.js"></script>
            <script src="__PUBLIC__/uploadify/jquery.uploadify.min.js"></script>
            <link rel="stylesheet" href="__PUBLIC__/uploadify/uploadify.css">
            <style>
                li{
                    list-style: none;
                }
            </style>
            <div class="form-group">
                <label class="col-sm-2 control-label">列表图</label>
                <div class="col-sm-5">
                    <div class="input-group">
                        <input type="text" class="form-control" name="drawing" readonly="" value="">
                        <div class="input-group-btn">
                            <button onclick="upImage(this)" class="btn btn-default" type="button">选择图片</button>
                        </div>
                    </div>
                    <div class="input-group" style="margin-top:5px;">
                        <img src="resource/images/nopic.jpg" class="img-responsive img-thumbnail" width="150">
                        <em class="close" style="position:absolute; top: 0px; right: -14px;" title="删除这张图片" onclick="removeImg(this)">×</em>
                    </div>
                </div>
                <script>
                    function controller($scope, $, _){

                    }
                    //上传图片
                    function upImage(obj) {
                        require(['util'], function (util) {
                            options = {
                                multiple: false,//是否允许多图上传
                                //data是向后台服务器提交的POST数据
                                data:{name:'后盾人',year:2099},
                            };
                            util.image(function (images) {          //上传成功的图片，数组类型 
                                $("[name='drawing']").val(images[0]);
                                $(".img-thumbnail").attr('src','__ROOT__/'+ images[0]);
                            }, options)
                        });
                    }

                    //移除图片
                    function removeImg(obj) {
                        $(obj).prev('img').attr('src', 'resource/images/nopic.jpg');
                        $(obj).parent().prev().find('input').val('');
                    }
                </script>
                <div class="col-sm-5" id="listPic"></div>
            </div>
            <div class="line line-dashed line-lg pull-in"></div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">商品图册</label>
                    <div class="col-sm-2">
                        <button onclick="upManyImage(this)" class="btn btn-default" type="button">选择图片</button>
                        <script>
                            //上传图片
                            function upManyImage(obj) {
                                require(['util'], function (util) {
                                    options = {
                                        //上传多图
                                        multiple: true,
                                    };
                                    util.image(function (images) {
                                        $(images).each(function(k,v){
                                            $("<img style='width:80px' src='__ROOT__/"+v+"'/><input type='text' name='img[]' value='"+v+"'/>").appendTo('#box');
                                        })
                                    }, options)
                                });
                            }
                        </script>
                    </div>
                    <div class="col-sm-8" id="box"></div>

                </div>
            <div class="line line-dashed line-lg pull-in"></div>
            <div class="form-group">
                <label class="col-sm-2 control-label">商品详情</label>
                <div class="col-sm-8">
                    <textarea id="container1" name="intro" style="height:300px;width:100%;"></textarea>
                    <script>
                        require(['util'], function (util) {
                            util.ueditor('container1', {hash:2,data:'hd'}, function (editor) {
                                //这是回调函数 editor是百度编辑器实例
                            });
                        })
                    </script>
                </div>
            </div>
            <div class="line line-dashed line-lg pull-in"></div>
            <div class="form-group">
                <label class="col-sm-2 control-label">售后服务</label>
                <div class="col-sm-8">
                    <textarea id="container" name="service" style="height:300px;width:100%;"></textarea>
                    <script>
                        require(['util'], function (util) {
                            util.ueditor('container', {hash:2,data:'hd'}, function (editor) {
                                //这是回调函数 editor是百度编辑器实例
                            });
                        })
                    </script>
                </div>
            </div>
            <input type="hidden" name="tid" value="">
            <!--<button class="btn btn-twitter btn-block m-b-sm">提交</button>-->
                <button class="btn btn-primary" id="btn" type="submit">提交</button>
        </form>
    </div>
</section>


